<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>Shopping Cart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>我的购物车</title>
	<script th:src="@{/js/jquery-3.3.1.js}"></script>
	<script th:src="@{/js/etao.js}"></script>
	<script th:src="@{/js/cart.js}"></script>
	<script th:src="@{/js/bootstrap.js}"></script>
	<link th:href="@{/css/bootstrap.css}" rel="stylesheet">
	<link th:href="@{/css/cart.css}" media="screen" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" th:href="@{/bootstrap-4.5.0-dist/css/bootstrap.min.css}" />
	<link th:href="@{/css/bootstrap.min.css}" media="screen" rel="stylesheet" type="text/css" />
	<script type="text/javascript" th:src="@{/bootstrap-4.5.0-dist/js/bootstrap.min.js}"></script>

</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light" id="topbar">
	  <span class="navbar-brand mb-0 h1" style="padding: 0 15px" id="title">华萃轩</span>
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	  <ul class="navbar-nav mr-auto" id="ba">
	      <li class="nav-item activity" >
	        <a class="nav-link" href="#">我的购物车</a>
	      </li>
	      <li class="nav-item" >
	        <a class="nav-link" href="#">我的订单</a>
	      </li>
	      <li class="nav-item dropdown" >
	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1"
	        	role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">我的余额
	        </a>
	         <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
	          <a class="dropdown-item" href="#" style="color: #000000;">2000</a>
	        </div>
	      </li>
	      <li class="nav-item dropdown" >
			  <a class="nav-link" href="#">个人中心</a>
	      </li>
     </ul>
     </div>
	</nav>
    <div class="container">
		<form th:action="@{/user/pay}">
		<table id="cartTable" class="cart table table-condensed">
			<thead>
				<tr>
					<th class="t-checkbox"><input class="check-all check" type="checkbox" /></th>
					<th class="t-goods text-center"></th>
					<th class="t-name text-center">药材名称</th>
					<th class="t-qu">规格</th>
					<th class="t-selling-price text-center"><label>销售单价</label></th>
					<th class="t-qty text-center"><label>数量</label></th>
					<th class="t-subtotal text-center"><label>合计</label></th>
					<th class="t-action"><label>操作</label></th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="medicine:${medicines}" class="good">

					<td class="goods"><input name="checkItem" type="checkbox" class="check-one check" th:value="${medicine.getId()}" /></td>
					<td><img th:src="@{${medicine.getImage()}}" /></td>
					<td class="name" th:text="${medicine.getName()}"></td>
					<td class="qu" th:text="${medicine.getSpecif()}"></td>
					<td class="small-bold-red text-right" style="padding-right:40px;" th:text="${medicine.getPrice()}" ></td>
					<td>
						<div class="input-group input-group-sm">
							<input name="medId" th:value="${medicine.getId()}" style="display: none">
							<span class="input-group-addon submit">-</span>
							<input name="quantity" type="text" class="number form-control input-sm" th:value="${medicine.getAmount()}" />
							<span class="input-group-addon submit">+</span>
						</div>
					</td>

<!--					<td class="small-bold-red text-right" id="price" style="padding-top: 1.1rem;" th:text="${medicine.getPrice()*medicine.getAmount()}"></td>-->
					<td class="small-bold-red text-right" id="price" style="padding-top: 1.1rem;" th:text="${#numbers.formatDecimal(medicine.getPrice()*medicine.getAmount(),1,'COMMA',2,'POINT')}"></td>
					<td class="action" style="padding-top: 1.1rem;"><a class="delete btn btn-xs btn-warning" th:href="@{/user/delete_car(medId=${medicine.getId()})}">删除</a></td>
				</tr>

			</tbody>
		</table>

		<div class="row">
			<div class="col-md-12 col-lg-12 col-sm-12">
				<div class="cart-summary">
					<div style="margin-left: 2rem;" class="pull-right">
						<input type="submit"
							id="btn_settlement"  class="btn btn-primary" value="去结算">
					</div>
					<div style="margin-left: 1rem; margin-top: 0.4rem;" class="pull-right total">
						<label>金额合计:<span id="money"  class="large-bold-red"></span></label>
					</div>
					<div style="margin-top: 4px;" class="pull-right">
						<label style="display: none">您选择了共计<span id="qtyCount" class="large-bold-red" style="margin: 0 4px;"></span>件
						</label>
					</div>
					<button type="button" class="btn btn-danger">删除选中商品</button>
				</div>
			</div>
		</div>
		</form>
	</div>
	<div style="height: 50px"></div>
	<div style="margin: auto;width: 1100px;">
		<img id="img" th:src="@{/img/game.jpg}" style="width: 1100px;height: 300px">
	</div>
	<div id="imagelist">
		<div style="font-size: 15px;background: #F3F3F3;height: 50px;text-align: center;font-size: 20px;"><label style="padding-top: 10px;">特惠商品</label></div>
		<ul style="list-style:none;" class="imgg">
			<li><div><a href="#"><img th:src="@{/img/p10.jpg}"  class="image"><div class="intro">蜂蜜￥25</div></a></div></li>
			<li><div><a  href="#"><img th:src="@{/img/p07.jpg}" class="image" ><div class="intro">燕窝￥150</div></a></div></li>
			<li><div><a  href="#"><img th:src="@{/img/p08.jpg}"  class="image" ><div class="intro">火麻子￥25</div></a></div></li>
			<li><div><a  href="#"><img th:src="@{/img/p09.jpg}" class="image" ><div class="intro">稷米￥36</div></a></div></li>
		</ul>
	</div>
	<nav class="navbar fixed-bottom navbar-light" id="bottombar">
	<a class="navbar-brand" href="#" style="color: #ffffff;margin-top: -10px;">
		<svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-hand-thumbs-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
		  <path fill-rule="evenodd" d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a9.84 9.84 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733.058.119.103.242.138.363.077.27.113.567.113.856 0 .289-.036.586-.113.856-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.163 3.163 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16v-1c.563 0 .901-.272 1.066-.56a.865.865 0 0 0 .121-.416c0-.12-.035-.165-.04-.17l-.354-.354.353-.354c.202-.201.407-.511.505-.804.104-.312.043-.441-.005-.488l-.353-.354.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315L12.793 9l.353-.354c.353-.352.373-.713.267-1.02-.122-.35-.396-.593-.571-.652-.653-.217-1.447-.224-2.11-.164a8.907 8.907 0 0 0-1.094.171l-.014.003-.003.001a.5.5 0 0 1-.595-.643 8.34 8.34 0 0 0 .145-4.726c-.03-.111-.128-.215-.288-.255l-.262-.065c-.306-.077-.642.156-.667.518-.075 1.082-.239 2.15-.482 2.85-.174.502-.603 1.268-1.238 1.977-.637.712-1.519 1.41-2.614 1.708-.394.108-.62.396-.62.65v4.002c0 .26.22.515.553.55 1.293.137 1.936.53 2.491.868l.04.025c.27.164.495.296.776.393.277.095.63.163 1.14.163h3.5v1H8c-.605 0-1.07-.081-1.466-.218a4.82 4.82 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z"/>
		</svg>
	健康好质量</a>
	  <a class="navbar-brand" href="#" style="color: #ffffff;margin-top: -10px;">
	  	<svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-shop" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
	  		<path fill-rule="evenodd" d="M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.371 2.371 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976l2.61-3.045zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0zM1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5zM4 15h3v-5H4v5zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3zm3 0h-2v3h2v-3z"/>
		</svg>
		  	无理由退换货</a>
	  <a class="navbar-brand" href="#" style="color: #ffffff;margin-top: -10px;">
	  	<svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-shield-fill-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
		  <path fill-rule="evenodd" d="M8 .5c-.662 0-1.77.249-2.813.525a61.11 61.11 0 0 0-2.772.815 1.454 1.454 0 0 0-1.003 1.184c-.573 4.197.756 7.307 2.368 9.365a11.192 11.192 0 0 0 2.417 2.3c.371.256.715.451 1.007.586.27.124.558.225.796.225s.527-.101.796-.225c.292-.135.636-.33 1.007-.586a11.191 11.191 0 0 0 2.418-2.3c1.611-2.058 2.94-5.168 2.367-9.365a1.454 1.454 0 0 0-1.003-1.184 61.09 61.09 0 0 0-2.772-.815C9.77.749 8.663.5 8 .5zM8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z"/>
		</svg>
	  	安全可保证</a>
	  <a class="navbar-brand" href="#" style="color: #ffffff;margin-top: -10px;">
	  	<svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-minecart-loaded" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
		  <path fill-rule="evenodd" d="M4 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM.115 3.18A.5.5 0 0 1 .5 3h15a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 14 12H2a.5.5 0 0 1-.491-.408l-1.5-8a.5.5 0 0 1 .106-.411zm.987.82l1.313 7h11.17l1.313-7H1.102z"/>
		  <path fill-rule="evenodd" d="M6 1a2.498 2.498 0 0 1 4 0c.818 0 1.545.394 2 1 .67 0 1.552.57 2 1h-2c-.314 0-.611-.15-.8-.4-.274-.365-.71-.6-1.2-.6-.314 0-.611-.15-.8-.4a1.497 1.497 0 0 0-2.4 0c-.189.25-.486.4-.8.4-.507 0-.955.251-1.228.638-.09.13-.194.25-.308.362H3c.13-.147.401-.432.562-.545a1.63 1.63 0 0 0 .393-.393A2.498 2.498 0 0 1 6 1z"/>
		</svg>
	  	全国配送</a>
	</nav>
<script>
	$(function () {
		var $check=$(".goods input");
		$("#money").html(0);

		$check.click(function () {
			var value=0;
			$(".good").each(function () {
				if (this.children[0].children[0].checked){
					value+=Number(this.children[6].innerHTML);
				}
			});
			$("#money").html(value.toFixed(2));
		});

		var $submit=$(".submit");
		$submit.click(function () {
			if (this.innerHTML=='+'){
				this.previousElementSibling.value = Number(this.previousElementSibling.value)+1 ;
				location.href="/user/num_modify?medId="+this.previousElementSibling.previousElementSibling.previousElementSibling.value
						+"&quantity="+this.previousElementSibling.value;
			}else {
				this.nextElementSibling.value = Number(this.nextElementSibling.value)-1;
				location.href="/user/num_modify?medId="+this.previousElementSibling.value+"&quantity="+this.nextElementSibling.value;
			}

		});

		$("#img").click(function () {
			location.href="/user/game"
		});



	});
</script>
</body>
</html>